<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>扫码交易信息</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<!--element-ui-->
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<style type="text/css">
		html,
		body {
			height: 100%;
			width: 100%;
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		.QRcode-info {
			box-sizing: border-box;
			padding: 20px;
		}

		.container {
			border: 1px solid #ededed;
		}

		.trading-info-title {
			height: 50px;
			line-height: 50px;
			font-size: 26px;
			color: #409eff;
			padding: 5px 20px;
			border-bottom: 1px solid #ededed;
		}

		.filter-input,
		.filter-select {
			width: 160px;
			margin-right: 10px;
		}

		.filter-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 15px;
			flex-wrap: nowrap;
			overflow: hidden;
		}

		.pages-control {
			border-top: 1px solid #ededed;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.dash-info {
			height: 100px;
			display: flex;
			justify-content: flex-start;
			align-items: stretch;

		}

		.dash-info div {
			width: 50%;
			box-sizing: border-box;
			text-align: center;
			display: flex;
			flex-direction: column;
			border: 1px solid #eee;
			background-color: #e0e2e5;
			color: rgba(0, 0, 0, .7)
		}

		.dash-info div span {
			font-size: 24px;
			font-weight: 600;
			padding-top: 10px;
		}

		.dash-info div span.dash-label {
			font-size: 16px;
			font-weight: 600;
			display: inline-block;
			padding: 10px 0;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="QRcode-info">
			<div class="container">
				<div class="trading-info-title text-overflow">扫码交易信息</div>
				<div class="filter-box">
					<!-- 状态查询 -->
					<div class="filter-by-status filter-cell">
						<!-- <span>订单状态:</span> -->
						<el-select class="filter-select" v-model="filter.tradeStatus" clearable placeholder="状态">
							<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div>
					<!-- 类型查询 -->
					<div class="filter-by-type filter-cell">
						<!-- <span>订单类型:</span> -->
						<el-select class="filter-select" v-model="filter.orderType" clearable placeholder="类型">
							<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div>
					<!-- 订单号 -->
					<div class="filter-by-type filter-cell">
						<!-- <span>订单号:</span> -->
						<el-input class="filter-select" v-model="filter.orderNo" placeholder="请输入订单号"></el-input>
					</div>
					<!-- 商户手机号 -->
					<div class="filter-by-type filter-cell">
						<!-- <span>商户手机号:</span> -->
						<el-input class="filter-select" v-model="filter.shopPhone" placeholder="请输入商户手机号"></el-input>
					</div>
					<div style="padding:20px 40px">
						<el-button style="width:180px" @click="handleQuery(0)">查询</el-button>
					</div>
				</div>

				<div class="list-box" v-loading="loading">
					<div class="dash-info">
						<div> <span class="dash-label">总金额</span> <span> ￥ {{dashboardInfo.statsAmount}}</span> </div>
						<div> <span class="dash-label">总手续费</span> <span>￥ {{dashboardInfo.statsFee}}</span> </div>
					</div>
					<el-table :data="info" style="width: 100%">
						<el-table-column v-for="cell in InfoHeader" :key="cell.prop" :prop="cell.prop" :label="cell.label" :formatter=formatterList>
						</el-table-column>
					</el-table>
				</div>
				<div class="pages-control">
					<el-pagination @current-change="handleCurrentChange" :current-page.sync="pages.currentPage" :page-size="pages.page_size"
					 layout="prev, pager, next, jumper" :total="pages.total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">

		var app = new Vue({
			el: "#app",
			data: {
				info: [],
				dashboardInfo: { statsAmount: 0, statsFee: 0 },
				InfoHeader: [
					{ prop: "orderNo", label: "订单号" },
					{ prop: "userId", label: "用户编号" },
					{ prop: "userName", label: "用户名称" },
					{ prop: "orderType", label: "订单类型" },
					{ prop: "merchantName", label: "商户名称" },
					{ prop: "totalAmount", label: "订单金额" },
					{ prop: "body", label: "商品信息" },
					// {prop:"detail",label:"产品描述"},
					// {prop:"tradeNo",label:"交易号"},
					// {prop:"typeName",label:"订单类型"},
					{ prop: "tradeStatus", label: "订单状态" },
					{ prop: "createTime", label: "创建时间" }
				],
				typeList: [
					{ value: "WECHAT", label: "微信" },
					{ value: "ALIPAY", label: "支付宝" }
				],
				statusList: [
					{ value: "WAIT_BUYER_PAY", label: "创建" },
					{ value: "TRADE_SUCCESS", label: "成功" },
					{ value: "TRADE_FAILURE", label: "失败" },
					{ value: "TRADE_FINISHED", label: "完结" },
					{ value: "TRADE_CLOSED", label: "关闭" },
					{ value: "TRADE_REFUND", label: "转入退款" },
					{ value: "TRADE_REVOKED", label: "已撤销" },
					{ value: "TRADE_PAYING", label: "用户支付中" },
				],
				filter: {
					orderType: "", // 	微信WECHAT, 支付宝ALIPAY
					tradeStatus: "",  // 
					orderNo: '',
					shopPhone:'', // 商户手机号
				},
				pages: {
					total: 10,
					page_size: 20,
					currentPage: 1
				}
			},
			methods: {
				handleCurrentChange(value) {
					this.handleQuery(value - 1);
				},
				formatterList(row, column, cellValue, index) {
					if (column.label === "创建时间") {
						return new Date(parseInt(cellValue)).toLocaleString().replace(/:\d{1,2}$/, '');
					} else {
						return cellValue===null?'--':cellValue;
					}
				},
				handleQuery(page = 0) {
					const _this = this;
					const userId = sessionStorage.getItem(4);
					let params = `?userId=${userId}&page=${page}&size=${this.pages.page_size}`;
					this.loading = true;
					for (let key in this.filter) {
						if (this.filter[key]) {
							params += `&${key}=${this.filter[key]}`;
						}
					}
					let url = window.baseUrl + `paymentchannel/pay_order/query/list` + params;
					$.ajax({
						type: "get",
						url,
						async: true,
						success: function (data) {
							_this.loading = false;
							if (data.resp_code === "000000") {
								_this.info = data.result.page.content;
								_this.pages.total = data.result.page.totalElements;
								_this.dashboardInfo = {
									statsAmount: data.result.statsAmount,
									statsFee: data.result.statsFee,
									grade: data.result.grade,
								}
							} else {
								_this.$notify.info({
									title: '消息',
									message: data.resp_message
								});
							}
						},
						error: function (error) {
							_this.loading = false;
							_this.$notify.info({
								title: '温馨提示',
								message: "服务器繁忙！"
							});
						}
					});
				}
			},
			created: function () {
				this.handleQuery(0);
			}
		})

	</script>
</body>

</html>